<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2023-05-30 15:21:53
 * @LastEditors: qingyang
 * @LastEditTime: 2023-05-31 17:10:15
-->
<template>
  <div class="notice-list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #typeSlot="{ scope }">
        {{ typeObj[scope.row.type] }}
      </template>
      <template #titleSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.noticeTitle"
          :sub-text="scope.row.content"
        ></CTableColumn>
      </template>
      <template #receiveUsernameSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.receiveUsername"
          :sub-text="scope.row.receiveEmail"
        ></CTableColumn>
      </template>
      <template #isReadSlot="{ scope }">
        <el-tag class="g-tag" :type="renderStatus(scope.row.isRead)" hit effect="plain">
          {{ scope.row.isRead ? '已读' : '未读' }}
        </el-tag>
      </template>
    </CPageTable>
  </div>
</template>

<script lang="ts">
export default {
  name: 'NoticeLog'
};
</script>
<script lang="ts" setup>
import { reactive } from 'vue';
import { useLogList } from './useNotice';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn } from '@/components/CTable';

const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useLogList();
const options = reactive<CPageTableProps>({
  title: '消息日志',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage] = useCPageTable(options);
const renderStatus = (feedbackStatus: boolean) => {
  return feedbackStatus ? 'success' : 'info';
};
const typeObj: { [key: string]: string } = {
  APPROVE: '审批结果',
  COOPERATION: '协作通知',
  OTHER: '其他'
};
</script>

<style lang="scss" scoped>
.notice-list-container {
  min-height: 80%;
}
</style>
